<!DOCTYPE html>
<html>
	<head>
		<!-- 设置浏览器不缓存 -->
		<META HTTP-EQUIV="pragma" CONTENT="no-cache">
		<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
		<META HTTP-EQUIV="expires" CONTENT="0">
		<!-- Content-Type -->
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<!-- Favicon -->
		<link rel="shortcut icon" href="./images/logo.png">
		<title>企业服务共享中心-客户工单</title>
		<!--stylesheets-->
		<link rel="stylesheet" href="./plugins/element/index.css">
		<script src="./plugins/vue/vue.js"></script>
		<script src="./plugins/element/index.js"></script>
		<script src="./plugins/vue/clipboard.js"></script>
		<script src="./plugins/axios/axios.min.js"></script>
		<script src="./js/common/public.js?v=0.8.0.3"></script>
		<!-- 自定义样式表 -->
		<link rel="stylesheet" href="./css/base.css?v=0.8.0.3">
	</head>
	<style type="text/css">
		.el-range-editor.el-input__inner {
			width: 200px;
		}

		.el-range-editor .el-range-input {
			width: 80px;
		}



		.el-form-item__datetimestyle .el-form-item__label {
			width: 50%;
		}


		.el-form-item__baseinfo .el-form-item__label {
			width: 50%;
		}

		.el-form-item__allbaseinfo .el-form-item__label {
			width: 100%;
		}
	</style>
	<body>
		<div id="app">
			<template>
				<el-container class="maincontainer">
					<el-container class="submaincontainer">
						<el-card class="box-card" style="position:relative;width:330px" shadow="never" v-show="leftbar_show">
							<div style="position:absolute;left:0;top:0;right:0;bottom:0;overflow-y:auto;overflow-x:hidden;padding-left: 20px;padding-top: 20px;padding-right: 20px;">
								<el-form :model="queryForm" ref="queryForm">
									<el-form-item label="关键字" prop="keyword" maxlength="20" autocomplete="off">
										<el-input v-model="queryForm.keyword"></el-input>
									</el-form-item>

									<el-form-item label="服务名称" prop="servicename">
										<el-select v-model="queryForm.servicename" placeholder="请选择" filterable clearable>
											<el-option v-for="item in services" :key="item.name" :label="item.name" :value="item.name">
											</el-option>
										</el-select>
									</el-form-item>

									<el-form-item label="税务类型" prop="taxtype">
										<!-- 	<el-input v-model="queryForm.taxtype"></el-input> -->
										<el-select v-model="queryForm.taxtype" placeholder="请选择" filterable clearable>
											<el-option v-for="item in taxtypeoptions" :key="item.value" :label="item.label" :value="item.value">
											</el-option>
										</el-select>
									</el-form-item>

									</el-form-item>
									<el-form-item label="状态" prop="status">
										<el-select v-model="queryForm.status" placeholder="请选择" filterable clearable>
											<el-option v-for="item in status" :key="item.value" :label="item.label" :value="item.value">
											</el-option>
										</el-select>
									</el-form-item>
									<el-form-item label="负责人" prop="charger">
										<el-select v-model="queryForm.charger" multiple placeholder="请选择" filterable clearable>
											<el-option v-for="item in allusers" :key="item.id" :label="item.name" :value="item.id">
											</el-option>
										</el-select>
									</el-form-item>
									<el-form-item label="截止日期" prop="endTime">
										<el-date-picker v-model="queryForm.endTime" type="datetimerange" value-format="yyyy-MM-dd" :picker-options="pickerOptions"
										 range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="left">
										</el-date-picker>
									</el-form-item>
									<el-form-item label="流转日期" prop="transdate">
										<el-date-picker v-model="queryForm.transdate" type="datetimerange" value-format="yyyy-MM-dd" :picker-options="pickerOptions"
										 range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="left">
										</el-date-picker>
									</el-form-item>

									<el-form-item label="更新日期" prop="updateTime">
										<el-date-picker v-model="queryForm.updateTime" type="datetimerange" value-format="yyyy-MM-dd" :picker-options="pickerOptions"
										 range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="left">
										</el-date-picker>
									</el-form-item>

									<el-form-item>
										<el-button size="small" type="primary" @click.native.prevent="start" style="position:fixed;left:20px;bottom:5px;">查询</el-button>
									</el-form-item>
								</el-form>
							</div>
						</el-card>




						<el-card class="box-card" style="width:100%" shadow="never">
							<div slot="header" class="clearfix">
								<i v-on:click="showLeftBar()" v-bind:class="[leftbar_show ? 'el-icon-s-fold' : 'el-icon-s-unfold']" style="color:#409EFF;cursor:pointer;"></i>
								<span>工单列表</span>
			<el-button-group style="float: right;margin-top:0px;">
					<el-tooltip v-for="item in toolbar" class="item" effect="dark" v-bind:content="item.content" placement="top-start">
						  <el-button size="small" v-bind:icon="item.icon" v-bind:type="item.type" @click="toolAction(item.content)">{{item.content}}</el-button>
					</el-tooltip>
			</el-button-group>
							</div>
							<div>
								<el-table ref="multipleTable" @select='selectionChange' :data="pagedata" tooltip-effect="dark" :height="tableHeight"
								 border highlight-current-row style="width: 100%;" @selection-change="handleSelectionChange" row-key="id" >
									<el-table-column type="selection" min-width="55">
									</el-table-column>



									<el-table-column type="expand" height="250">
										<template slot-scope="props">
											<el-form label-position="left" inline class="demo-table-expand">
												<el-table :data="props.row.recs" stripe border>

													<el-table-column label="事项" prop="matter"></el-table-column>
													<el-table-column label="状态" prop="status"></el-table-column>
													<el-table-column label="创建日期" prop="createTime"></el-table-column>
													<el-table-column label="截止日期" prop="endTime"></el-table-column>
													<el-table-column label="事项负责人" prop="charger"></el-table-column>
													<el-table-column label="备注" prop="remake"></el-table-column>

													<el-table-column label="更新日期" prop="createTime"></el-table-column>
													<el-table-column label="操作" min-width="50">
														<template slot-scope="scope">
															<el-link type="primary" @click="edititem(scope.$index, scope.row)" v-if="localStorage.getItem('USERID')==scope.row.chargerId||localStorage.getItem('ISLEADER')=='是'">编辑</el-link>
															<el-link type="primary" @click="remove(scope.$index, scope.row)" v-if="localStorage.getItem('ISLEADER')=='是'">删除</el-link>
														</template>
													</el-table-column>
												</el-table>

											</el-form>
										</template>
									</el-table-column>


								<el-table-column v-for="column in tablecolums" v-bind:prop="column.prop" v-bind:label="column.label"
									 v-bind:min-width="column.width" show-overflow-tooltip>
										  <template slot-scope="scope">
												<el-link v-if ="column.prop == 'documentNumber' && (scope.row.leaderId == localStorage.getItem('USERID') || localStorage.getItem('ISMANAGER')=='是')" type="primary" @click="docshow(scope.$index, scope.row)" >{{ scope.row.documentNumber}}</el-link>
												<el-link v-else-if ="column.prop == 'compname' && (scope.row.leaderId == localStorage.getItem('USERID') || localStorage.getItem('ISMANAGER')=='是')" type="primary" @click="editbase(scope.$index, scope.row)" >{{ scope.row.compname}}</el-link>
												<span v-else-if ="column.prop == 'phone' && localStorage.getItem('ISMANAGER')=='是'" >{{ scope.row[column.prop]}}</span>
												<span v-else-if ="column.prop == 'phone' && scope.row.leaderId != localStorage.getItem('USERID')" >*************</span>
												<span v-else>{{ scope.row[column.prop]}}</span>
										  </template>
									</el-table-column>
									<el-table-column label="操作" min-width="80">
										<template slot-scope="scope">
											<el-link type="primary" @click="additem(scope.$index, scope.row)" v-if="localStorage.getItem('USERID')==scope.row.leaderId||localStorage.getItem('ISLEADER')=='是'">添加</el-link>
											<el-link type="primary" @click="edit(scope.$index, scope.row)" v-if="localStorage.getItem('USERID')==scope.row.leaderId||localStorage.getItem('ISLEADER')=='是'">分配</el-link>
										</template>
									</el-table-column>

								</el-table>


								<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentPageChange" :current-page="queryForm.pageNo"
								 :page-sizes="queryForm.pagesizes" :page-size="queryForm.pagesize" background layout="total,sizes, prev, pager, next"
								 :total="pagetotal">
								</el-pagination>
							</div>
		</div>
		</el-card>
		</el-container>
		</el-container>
		<el-dialog :close-on-click-modal="false" title="分配业务" :visible.sync="dialogEditFormVisible" width="600px">
			<el-form :model="transForm" :rules="transFormrules" ref="transForm" label-width="120px">
				<el-row :gutter="20">
					<el-col :span="12">
						<el-form-item label="合同号" prop="contractNumber">
							<el-input v-model="transForm.contractNumber"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="12">
						<el-form-item label="档案号" prop="documentNumber">
							<el-input v-model="transForm.documentNumber"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="12">
						<el-form-item label="财税分组" prop="taxGroup">
							<el-select v-model="transForm.taxGroup">
							  <el-option
								v-for="item in depts"
								:key="item.id"
								:label="item.name"
								:value="item.id">
							  </el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="12">
						<el-form-item label="截止日期" prop="enddate">
							<el-date-picker v-model="transForm.enddate" type="date" placeholder="选择日期" value-format="yyyy-MM-dd">
							</el-date-picker>
						</el-form-item>
					</el-col>
				</el-row>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="12">
						<el-form-item label="负责人" prop="leaderId">
							<el-select v-model="transForm.leaderId" placeholder="请选择" filterable clearable>
								<el-option v-for="item in allusers" :key="item.id" :label="item.name" :value="item.id">
								</el-option>
<!-- 								<el-option v-for="item in members" :key="item.id" :label="item.name" :value="item.id">
								</el-option> -->
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="24">
						<el-form-item label="备注" prop="remake">
							<el-input v-model="transForm.remake" maxlength="250"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogEditFormVisible = false">取 消</el-button>
				<el-button type="primary" :disabled="submitEditDisable" @click="editcofirm">确 定</el-button>
			</div>
		</el-dialog>







		<el-dialog :close-on-click-modal="false" title="添加/编辑 办理事项" :visible.sync="dialogItemFormVisible" width="600px">
			<el-form :model="workorderDetailForm" :rules="workorderDetailFormrules" ref="workorderDetailForm" label-width="120px">
				<el-row :gutter="20">
					<el-col :span="24">
						<el-form-item label="事项" prop="matter">
							<el-select v-model="workorderDetailForm.matter" placeholder="请选择" filterable clearable allow-create>
								<el-option v-for="item in handleitems" :key="item.id" :label="item.value" :value="item.value">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="24">
						<el-form-item label="状态" prop="status">
							<el-select v-model="workorderDetailForm.status" placeholder="请选择" filterable clearable>
								<el-option v-for="item in status" :key="item.value" :label="item.label" :value="item.value">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="16">
						<el-form-item label="截止日期" prop="endTime">
							<el-date-picker v-model="workorderDetailForm.endTime" type="date" placeholder="选择日期" value-format="yyyy-MM-dd">
							</el-date-picker>
						</el-form-item>
					</el-col>
				</el-row>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="24">
						<el-form-item label="事项负责人" prop="chargerId">
							<el-select v-model="workorderDetailForm.chargerId" placeholder="请选择" filterable clearable>
								<el-option v-for="item in allusers" :key="item.id" :label="item.name" :value="item.id">
								</el-option>
<!-- 								<el-option v-for="item in members" :key="item.id" :label="item.name" :value="item.id">
								</el-option> -->
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="24">
						<el-form-item label="备注" prop="remake">
							<el-input v-model="workorderDetailForm.remake" maxlength="100" style="width: 217px;"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20" v-if="action!='additem'">
					<el-col :span="24">
						<el-form-item label="证据上传" prop="evidence">
			<el-upload class="avatar-uploader" ref="upload" multiple :limit="20" :file-list="fileList" :action="uploadurl + workorderDetailForm.workorderId+'/'+workorderDetailForm.id"
			 :headers="headers" list-type="picture" :on-preview="handledownloadPreview" :on-remove="handleRemove" :auto-upload="true" accept=".jpg,.png"
			 :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
				<i class="el-icon-plus">点击上传图片不超过20张图片</i>
			</el-upload>

						</el-form-item>
					</el-col>
				</el-row>



			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogItemFormVisible = false">取 消</el-button>
				<el-button type="primary" :disabled="submitDisable" @click="itemcofirm">确 定</el-button>
			</div>
		</el-dialog>
		<el-dialog :visible.sync="imgdialogVisible">
		<img width="100%" :src="imgdialogImageUrl" alt="">
		</el-dialog>
	<el-dialog :close-on-click-modal="false" title="新增工单" :visible.sync="dialogFormVisible" width="1000px">
			<el-form :model="workorderForm" ref="workorderForm" label-width="100px" :rules="workorderFormRules">
				<el-tabs :value="tabvalue">
					<el-tab-pane label="基础信息" name="base">
						<el-row :gutter="20">
							<el-col :span="8">
								<el-form-item label="公司名称" prop="customerId">
								  <el-select
								    v-model="workorderForm.customerId"
								    filterable
								    remote
								    reserve-keyword
								    placeholder="请输入关键词"
								    :remote-method="remoteMethod"
								    :loading="loading">
								    <el-option
								      v-for="item in options"
								      :key="item.value"
								      :label="item.label"
								      :value="item.value">
								    </el-option>
								  </el-select>
							</el-col>
						</el-row>
						<el-row :gutter="20">
							<el-col :span="8">
								<el-form-item label="截止日期" prop="enddate">
									<el-date-picker v-model="workorderForm.enddate" type="date" placeholder="选择日期" value-format="yyyy-MM-dd">
									</el-date-picker>
								</el-form-item>

							</el-col>
							<el-col :span="8">
								<el-form-item label="负责人" prop="leaderId">
									<el-select v-model="workorderForm.leaderId" placeholder="请选择" filterable clearable>
										<el-option v-for="item in allusers" :key="item.id" :label="item.name" :value="item.id">
										</el-option>
<!-- 										<el-option v-for="item in members" :key="item.id" :label="item.name" :value="item.id">
										</el-option> -->
									</el-select>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row :gutter="20">
							<el-col :span="24">
								<el-form-item label="备注" prop="remake">
									<el-input v-model="workorderForm.remake" type="textarea" maxlength="250"></el-input>
								</el-form-item>
							</el-col>
						</el-row>
					</el-tab-pane>	
								<el-tab-pane label="选择业务" name="business">
									<el-row :gutter="5">
										<el-col :span="2" :offset="22">
											<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="addService()" v-show="addBusinessShow">添加</el-button>
										</el-col>
									</el-row>
									<el-row :gutter="20">
										<el-col :span="24">
											<el-table border :data="serviceForm.service" ref="multipleTable" tooltip-effect="dark" size="mini" height="200" class="addkeepaccount"
											 style="width: 100%;">
												<el-table-column v-for="column in detailcolums" v-bind:prop="column.prop" v-bind:label="column.label"
												 v-bind:min-width="column.width" show-overflow-tooltip>
												</el-table-column>
												<el-table-column label="操作" min-width="50">
													<template slot-scope="scope">
														<el-tooltip class="item" effect="dark" content="编辑" placement="top-start">
															<el-link type="primary" icon="el-icon-edit" @click="editService(scope.$index, scope.row)"></el-link>
														</el-tooltip>
														<el-tooltip class="item" effect="dark" content="删除" placement="top-start" >
															<el-link type="danger" icon="el-icon-delete" @click="delService(scope.$index, scope.row)"></el-link>
														</el-tooltip>
													</template>
												</el-table-column>
											</el-table>
										</el-col>
									</el-row>
							
									
								</el-tab-pane>
				</el-tabs>

			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="workorderconfirm" :disabled="submitDisable">确 定</el-button>
			</div>
		</el-dialog>
		<el-dialog :close-on-click-modal="false" title="服务信息" :visible.sync="dialogserviceFormDetailVisible" width="1000px">
			<el-form :model="serviceFormDetail" :rules="serviceFormDetailRules" ref="serviceFormDetail" label-width="80px">
				<el-row :gutter="20">
					<el-col :span="8">
						<el-form-item label="服务名称" prop="name">
							<el-select v-model="serviceFormDetail.name" filterable @change="servicechange">
								<el-option v-for="item in services" :key="item.id" :label="item.name" :value="item.id">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="规格" prop="spec">
							<span>{{serviceFormDetail.spec}}</span>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="类别" prop="type">
							<span>{{serviceFormDetail.type}}</span>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="8">
						<el-form-item label="数量" prop="amount">
							<el-input v-model="serviceFormDetail.amount"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="单位" prop="unit">
							<el-input v-model="serviceFormDetail.unit"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="单价" prop="price">
							<el-input v-model="serviceFormDetail.price"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="8">
						<el-form-item label="成本金额" prop="cost">
							<el-input v-model="serviceFormDetail.cost"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="服务金额" prop="totalprice">
							<el-input v-model="serviceFormDetail.totalprice"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="备注" prop="memo">
							<el-input v-model="serviceFormDetail.memo"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="24">
						<el-table border :data="serviceFormDetail.service" ref="serviceFormDetailTable" tooltip-effect="dark" size="mini"
						 height="200" @row-click="serviceDetailClick" style="width: 100%;">
							<el-table-column v-for="column in detailcolums" v-bind:prop="column.prop" v-bind:label="column.label"
							 v-bind:min-width="column.width" show-overflow-tooltip>
							</el-table-column>
						</el-table>
					</el-col>
				</el-row>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogserviceFormDetailVisible = false">取 消</el-button>
				<el-button type="primary" @click="confirmService" :disabled="submitDisable">确 定</el-button>
			</div>
		</el-dialog>
		<el-dialog :close-on-click-modal="false" title="客户信息" :visible.sync="dialogEditBaseFormVisible" width="900px">
			<el-form :model="customerForm" ref="customerForm" label-width="100px" :rules="customerFormrules">
						<el-row :gutter="20">
							<el-col :span="16">
								<el-form-item label="客户名称" prop="compname">
									<el-input v-model="customerForm.compname"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item label="联系人" prop="contacter">
									<el-input v-model="customerForm.contacter"></el-input>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row :gutter="20">
							<el-col :span="8">
								<el-form-item label="电话" prop="phone">
									<el-input v-model="customerForm.phone"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item label="税务类型" prop="taxtype">
									<el-select v-model="customerForm.taxtype" placeholder="请选择" filterable clearable>
										<el-option v-for="item in taxtypeoptions" :key="item.value" :label="item.label" :value="item.value">
										</el-option>
									</el-select>
								</el-form-item>
							</el-col>
						</el-row>

			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogEditBaseFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="editbaseconfirm">确 定</el-button>
			</div>
		</el-dialog>		
		<el-dialog :close-on-click-modal="false" title="客户档案" :visible.sync="dialogDocFormVisible" width="900px">
			<el-form :model="workorderForm" ref="workorderForm" label-width="100px">
						<iframe :src="docsrc" frameborder="0" 
							style="width: 100%;height: 500px;"></iframe>

			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogDocFormVisible = false">关闭</el-button>
			</div>
		</el-dialog>

		</template>
		</div>
	</body>

	<script src="./js/workorder.js"></script>

	</script>
</html>
